import Image from "next/image"

export default function FlyWheelModel() {
  return (
    <section id="flywheel-model" className="bg-black py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">FlyWheel Model</h2>
          <p className="mt-6 text-lg leading-8 text-gray-300">
            Our innovative economic model creates a sustainable ecosystem through continuous value creation and capture.
          </p>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-16 lg:grid-cols-2">
          <div className="flex justify-center items-center">
            <div className="relative w-full max-w-md aspect-square">
              <Image
                src="https://beraroot.com/assets/flywheel-c9e9064c.svg"
                alt="FlyWheel Model Diagram"
                fill
                className="object-contain"
              />
            </div>
          </div>

          <div className="flex flex-col justify-center">
            <div className="space-y-8">
              {[
                {
                  title: "Value Creation",
                  description:
                    "Our platform generates value through DA services, NFT marketplace fees, and ecosystem growth.",
                },
                {
                  title: "Token Utility",
                  description:
                    "BERA tokens power the entire ecosystem, providing governance rights and access to premium features.",
                },
                {
                  title: "Staking Rewards",
                  description:
                    "Stakers receive rewards from protocol fees, creating a sustainable yield generation mechanism.",
                },
                {
                  title: "Protocol Growth",
                  description:
                    "As more users join the ecosystem, the value captured increases, creating a positive feedback loop.",
                },
              ].map((item, index) => (
                <div key={index} className="rounded-xl bg-gray-900/50 p-6 ring-1 ring-gray-800">
                  <h3 className="text-xl font-semibold text-white">{item.title}</h3>
                  <p className="mt-2 text-gray-300">{item.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
